<template>
  <div class="home_wrap">
    <z-welcome
      :username="userInfo.username"
      :staticData="state.welcome"
    ></z-welcome>
    <div class="bottom">
      <div class="left">
        <z-quick-enter></z-quick-enter>
        <z-card title="数据统计" class="statistics">
          <userlogin-echart :data="state.loginData"></userlogin-echart>
        </z-card>
      </div>
      <div class="right">
        <z-version :version="state.version"></z-version>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import ZCard from "@/components/common/card/index.vue";
import ZWelcome from "@/components/admin/welcome/index.vue";
import ZQuickEnter from "@/components/admin/quickEnter/index.vue";
import ZVersion from "@/components/common/version/index.vue";
import UserloginEchart from "@/components/charts/home/userloginEchart.vue";
import { userStoreModel } from "@/stores/user/index";
import { storeToRefs } from "pinia";
import {
  homeLoginStatisticApi,
  homeStatisticApi,
  homeVersionApi,
} from "@/api/home";
import type { HomeStatisticModel } from "@/api/home/index.d";
const userStore = userStoreModel();
const { userInfo } = storeToRefs(userStore);

const state = reactive({
  welcome: [] as HomeStatisticModel.statisticResponse[],
  version: [] as HomeStatisticModel.versionResponse[],
});

const getStatistics = async () => {
  // 获取数据
  const { data } = await homeStatisticApi();
  state.welcome = data;
};

const getVersion = async () => {
  // 获取数据
  const { data } = await homeVersionApi();
  state.version = data;
};
getStatistics();
getVersion();

</script>
<style lang="less">
.home_wrap {
  // display: flex;
  // flex-direction: column;
  background-color: inherit !important;

  .bottom {
    display: flex;
    justify-content: space-between;
    .left {
      width: 70%;
    }
    .right {
      width: 30%;
      margin-left: 20px;
    }
  }
}
</style>
